import { Image, Upload, UploadProps, message } from "antd";
import { useState } from "react";
import ImgCrop, { ImgCropProps } from "antd-img-crop";

import {
  CloseCircleOutlined,
  LoadingOutlined,
  OneToOneOutlined,
  PlusOutlined,
} from "@ant-design/icons";
import admin_config from "@/config/admin_config";


export default function NumUploadFile({
  onChange,
  value = [],
  aspect = 1,
}: {
  onChange?: Function;
  value?: string[];
  aspect?: number;
}) {
  const [imgs, setImgs] = useState(value);
  const [loading, setLoading] = useState(false);
  const handleChange = (info: any) => {
    if (info.file.status === "uploading") {
      setLoading(true);
      return;
    }
    if (info.file.status === "done") {
      // Get this url from response in real world.
      const {
        file: { response },
      } = info;
      if (response.code === 200) {
        let url = response.data;
        let temp = [...imgs, url];
        setImgs(temp);
        onChange?.(temp);
      } else {
        message.error("上传失败");
      }
      setLoading(false);
    }
  };

  const uploadButton = () => (
    <button style={{ border: 0, background: "none" }} type="button">
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>上传</div>
    </button>
  );

  const deleteImg = (index:number) => {
    imgs.splice(index,1)
    setImgs([...imgs])
  }

  return (
    <div className="flex ">
      {imgs.map((it,index) => {
        return (
          <div key={it} className=" relative mr-4" style={{
            flex:'0 0 100px'
          }}>
            <Image
              src={it}
              alt=""
              style={{
                width: "100px",
                height: "100px",
              }}
            ></Image>
            <CloseCircleOutlined onClick={() => deleteImg(index)} className="text-3xl cursor-pointer text-blue-600 absolute -top-3 -right-3" />
          </div>
        );
      })}
      <ImgCrop
        showGrid={true}
        // rotationSlider
        aspect={aspect}
        minZoom={0.4}
        
        cropperProps={{ restrictPosition: false } as any}
        // cropperProps={{}}
        modalProps={
          {
            width: "50%",
          } as any
        }
        aspectSlider
      >
        <Upload
          name="file"
          listType="picture-card"
          className="flex flex-col"
          accept="image/png, image/jpeg,image/jpg"
          showUploadList={false}
          action={admin_config.uploadImg}
          // beforeUpload={(file) => {
          //   return new Promise((resolve) => {
          //     const reader = new FileReader();
          //     reader.readAsDataURL(file);
          //     reader.onload = () => {
          //       // console.log();
          //       setTemp(reader.result as string);
          //       resolve(false);
          //     };
          //   });
          // }}
          onChange={(e) => handleChange(e)}
        >
          {uploadButton()}
        </Upload>
      </ImgCrop>
    </div>
  );
}
